<template>
  <el-table
      :data = "tableData"
      stripe border
      style = "width: 100%">
    <el-table-column type = "index" align = "right"></el-table-column>
    <el-table-column prop = "operation" label = "操作" align = "center" width = "70">
      <!--传歌的id-->
      <base-like></base-like>
    </el-table-column>
    <el-table-column prop = "title" label = "标题" min-width = "30%" />
    <el-table-column prop = "singer" label = "歌手" min-width = "28%" />
    <el-table-column prop = "album" label = "专辑" min-width = "22%" />
    <el-table-column prop = "time" label = "时间" align = "left" min-width = "8%" />
  </el-table>
  <!--分页-->
  <div class = "row-center-container">
    <el-pagination
        style = "margin: 0 auto"
        v-model:currentPage = "currentPage"
        :page-size = "100"
        :total = "1000"
        :small = "false"
        layout = " prev, pager, next"
        @current-change = "handleCurrentChange"
    />
  </div>
</template>

<script setup>
import BaseLike from "@/components/Base/BaseLike";
import {ref} from "vue";

const tableData = [
  {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  }, {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  }, {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  }, {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  }, {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  }, {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  }, {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  }, {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  }, {
    title: 'Departures ～あなたにおくるアイの歌～',
    singer: 'EGOIST\n',
    album: 'GREATEST HITS 2011-20',
    time: '04:17',
  },
]

//分页器数据
let currentPage = ref(1)
const handleCurrentChange = (val) => {
  currentPage = val
}
</script>

<style scoped>


</style>